<template>
  <el-menu
    active-text-color="#ffd04b"
    background-color="#545c64"
    class="el-menu-vertical-demo"
    default-active="2"
    text-color="#fff"
    @open="handleOpen"
    @close="handleClose"
  >
    <el-sub-menu
      v-for="(item, index) in MenuJson"
      :key="item.id"
      :index="item.id"
    >
      <template #title>
        <el-icon>
          <component :is="menuIconList[index]"></component>
        </el-icon>
        <span>{{ item.menuName }}</span>
      </template>
      <el-menu-item
        v-for="(obj, i) in item.children"
        :key="obj.id"
        :index="obj.id"
        @click="savePath(obj.path)"
      >
        <template #title>
          <!-- <el-icon>
            <component :is="menuIcon"></component>
          </el-icon> -->
          <span>{{ obj.menuName }}</span>
        </template>
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script lang="ts" setup>
import MenuJson from "@/assets/json/menu.json";
import { useRouter } from "vue-router";
const router = useRouter();
const menuIconList = ["House", "DataAnalysis", "DataLine", "Orange","Operation",'MessageBox'];
const menuIcon = "Setting";
const handleOpen = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath);
};
function savePath(path: string) {
  // console.log("地址", path);
  router.push("/" + path);
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
</script>

<style lang="scss" scoped>
</style>